<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
        <el-form-item label="键：" prop="keyy">
            <el-input v-model="formInline.keyy" placeholder="请输入键" />
        </el-form-item>
        <el-form-item label="值：" prop="valuee">
            <el-input v-model="formInline.valuee" placeholder="请输入值" />
        </el-form-item>
        <el-form-item label="表名：" prop="tableName">
            <el-input v-model="formInline.tableName" placeholder="请输入表名" />
        </el-form-item>
        <el-form-item label="字段：" prop="fieldName">
            <el-input v-model="formInline.fieldName" placeholder="请输入字段" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="botton-group">

        <el-button type="primary" plain @click="addOne(),resetForm1(ruleFormRef1)">新增</el-button>
        <el-button plain @click="delect()">删除</el-button>
        <el-button plain>更多操作</el-button>
    </div>
    <el-table ref="multipleTableRef" :data="state.dictData" style="width: 100%" height="500"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="keyy" label="键" />
        <el-table-column property="valuee" label="值" />
        <el-table-column property="tableName" label="表名" show-overflow-tooltip />
        <el-table-column property="fieldName" label="字段" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
                <el-button :icon="Setting" circle @click="handleEdit(scope.$index, scope.row)" />
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background" :total="state.page"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="dialogTableVisible" :title="state.changeoradd">
        <el-form class="insideform" :model="form1" ref="ruleFormRef1">
            <el-form-item label="键：" :label-width="formLabelWidth" prop="keyy">
                <el-input v-model="form1.keyy" autocomplete="off" />
            </el-form-item>
            <el-form-item label="值：" :label-width="formLabelWidth" prop="valuee">
                <el-input v-model="form1.valuee" autocomplete="off" />
            </el-form-item>
            <el-form-item label="表名：" :label-width="formLabelWidth" prop="tableName">
                <el-input v-model="form1.tableName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="字段：" :label-width="formLabelWidth" prop="fieldName">
                <el-input v-model="form1.fieldName" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="realGo()">提交</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="删除确认" width="30%">
        <span>你确定要删除以下键吗？
            <p style="margin-top: 10px;">{{state.delname.toString()}}</p>
        </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="realDel()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, ElTable, ElTree, ElMessage } from 'element-plus'
import { getDictApi, addDictApi, changeDictApi, delDictApi } from '../../apis/dict'

import {
    Setting,
} from '@element-plus/icons-vue'

interface User {
    date: string
    name: string
    address: string
}

const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()
const dialogTableVisible = ref(false)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const formLabelWidth = '140px'
const formInline = reactive({
    keyy: '',
    valuee: '',
    tableName: '',
    fieldName: '',
})
const state = reactive({
    delId: '',
    delname: '',
    dictData: [],
    changeoradd: '',
    pageSize: 10,
    pageNum: 1,
    page: 1,
})

const form1 = reactive({
    keyy: '',
    valuee: '',
    tableName: '',
    fieldName: '',
    dictId: '',
})
const multipleSelection = ref<User[]>([])
const dialogVisible = ref(false)
function search() {
    const a = `keyy=${formInline.keyy}&valuee=${formInline.valuee}&tableName=${formInline.tableName}&fieldName=${formInline.fieldName}&pageSize=${state.pageSize}&pageNum=${state.pageNum}`
    getAll(a)
}

const resetForm = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    getAll()
};

const resetForm1 = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    // getAllRole()
};

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

function addOne() {
    state.changeoradd = "新增字典"
    dialogTableVisible.value = true
}

const handleChange = (value: number) => {
    console.log(value)
}


const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    dialogTableVisible.value = true
    state.changeoradd = "修改字典"
    form1.keyy = row.keyy
    form1.valuee = row.valuee
    form1.tableName = row.tableName
    form1.fieldName = row.fieldName
    form1.dictId = row.dictId

}

function delect() {
    const data = JSON.parse(JSON.stringify(multipleSelection.value));
    console.log(data);
    const a = data.map((item: { keyy: any }) => {
        return item.keyy
    })
    state.delId = a
    const b = data.map((item: { dictId: any }) => {
        return item.dictId
    })
    state.delname = a
    state.delId = b
    console.log(a);
    console.log(b);
    if (data != "") {
        dialogVisible.value = true
    } else {
        ElMessage.error("没有选中任何内容，无法删除")
    }


}

function realGo() {
    const a = `keyy=${form1.keyy}&valuee=${form1.valuee}&tableName=${form1.tableName}&fieldName=${form1.fieldName}`
    const b = `keyy=${form1.keyy}&valuee=${form1.valuee}&tableName=${form1.tableName}&fieldName=${form1.fieldName}&dictId=${form1.dictId}`
    if (state.changeoradd == "新增字典") {
        addDict(a)
    } else {
        changeDict(b)
    }
}

async function getAll(data?: any) {
    const res = await getDictApi(data)
    console.log(res);
    state.dictData = res.rows
    state.page = res.total

}
async function addDict(data: any) {
    const res = await addDictApi(data)
    console.log(res);
    if (res == "") {
        ElMessage.success("添加字典成功")
        getAll(`pageNum=${state.pageNum}&pageSize=${state.pageSize}`)
        dialogTableVisible.value = false
    }
}

async function changeDict(data: any) {
    const res = await changeDictApi(data)
    console.log(res);
    if (res == "") {
        ElMessage.success("修改字典成功")
        getAll(`pageNum=${state.pageNum}&pageSize=${state.pageSize}`)
        dialogTableVisible.value = false
    }

}

async function delDict() {
    const res = await delDictApi(state.delId)
    console.log(res);
    if (res == "") {
        ElMessage.success("删除字典成功")
        getAll(`pageNum=${state.pageNum}&pageSize=${state.pageSize}`)
        dialogTableVisible.value = false
    }

}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    state.pageSize = val
    console.log(state.pageSize);
    getAll(`pageSize=${val}`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    state.pageNum = val
    getAll(`pageNum=${val}`)
}

function realDel() {
    delDict()
    dialogVisible.value = false
}

onMounted(() => {
    getAll()
})
</script>

<style scoped>
.demo-form-inline {
    display: flex;
}

.insideform {
    width: 90% !important;
}

.demo-pagination-block {
    margin: 10px 0;
}
</style>